<template>
    <main>
		<van-cell-group inset class="mgb10 flex pd16">
			<div class="shop-logo"><img src="/img/avatar/shop_logo.png" alt=""/></div>
			<div class="shop-base-wrap">
				<div class="full-name">台州市鼎慧贸易股份有限公司台州市鼎慧贸易股份有限公司</div>
				<div class="shop-medal">
					<div class="medal-item"><i class="iconfont">&#xe64b;</i><span>热门店铺</span></div>
					<div class="medal-item"><i class="iconfont">&#xe63b;</i><span>小店代发</span></div>
				</div>
				<div class="follower">粉丝数 3253</div>
			</div>
		</van-cell-group>
		<van-cell-group inset class="mgb10">
			<div class="base-info">
				<van-cell size="large" >
					<template #title><h3>商家概况</h3></template>
					<template #value><span class="font-12 txt-disable">2020-11-09 开店</span></template>
				</van-cell>
				<van-cell title="营业执照" is-link center @click="preview">
					<template #value>
						<i class="iconfont font-16">&#xe641;</i><span>&nbsp;查看</span>
					</template>
				</van-cell>
				<van-cell title="社会统一信用码" value="91110105074130991C" is-link @click="copyText('91110105074130991C','信用码已复制')"/>
				<van-cell title="企业类型" value="有限责任公司（自然人独资）"/>
				<van-cell title="注册资金" value="200万"/>
				<van-cell title="法定代表人" value="方圆圆"/>
				<div class="van-cell trade-main">
					<div class="title">主营范围</div>
					<div class="value">手机、3C配件、泛智能终端、物联模组、卡类产品、权益</div>
				</div>
				<div class="van-cell overview">
					<van-text-ellipsis rows="3" :content="overview" expand-text="展开" collapse-text="收起" />
				</div>
			</div>

			<van-cell center>
				<template #icon><van-icon name="location" class="txt-primary font-16"/></template>
				<template #title><div style="line-height:18px;padding-left:4px;">浙江省杭州市玄武区 关二爷路8号超级强大厦A座12楼1563房</div></template>
			</van-cell>
		</van-cell-group>
		<van-cell-group inset class="mgb10">
			<van-cell size="large" class="title">
				<template #title><h3>服务能力</h3></template>
				<template #value>
					<div class="linker">
						<span class="font-12">联系人</span>
						<van-button icon="user-o" size="mini" color="var(--van-primary-color)" round plain @click="showLinker=true">施先生</van-button>
					</div>
				</template>
			</van-cell>
			<van-cell title="交易范围" class="trade-main" value="全国/某省"/>
			<van-cell title="付款支持" class="trade-main" center>
				<template #value>
					<span class="mgl10"><b class="iconfont txt-success">&#xe63f;</b> 网上</span>
					<span class="mgl10"><b class="iconfont txt-success">&#xe60a;</b> 线下</span>
				</template>
			</van-cell>
			<van-cell title="取货支持" center>
				<template #value>
					<span class="mgl10"><b class="iconfont txt-success">&#x7269;</b> 物流</span>
					<span class="mgl10"><b class="iconfont txt-success">&#xe682;</b> 自提</span>
				</template>
			</van-cell>
			<van-cell title="营业时间" value="09:00 ~ 23:00"/>
			<div class="van-cell trade-main">
				<div class="title">客服时间</div>
				<div class="value font-12">周一至周五 9:00至20:00， 周末休息</div>
			</div>
			<van-cell title="售后退货" class="trade-main" center>
				<template #value>
					<span class="refund" title="下单后7天内可退货"> <b>7</b> 天可退</span>
				</template>
			</van-cell>
		</van-cell-group>
		<van-divider>已经到底了</van-divider>
		<!-- 联系人信息上拉面板 -->
		<van-action-sheet v-model:show="showLinker" description="联系人：施先生" cancel-text="关闭" >
			<van-cell-group class="primary-icon">
				<van-cell icon="wechat" title="322243214dffsd" value="复制微信号" is-link/>
				<van-cell title="18648945414" value="拨打手机" is-link>
					<template #icon><i class="iconfont">&#xe604;</i></template>
				</van-cell>
				<van-cell icon="phone-o" title="400012345678" value="拨打固话" is-link/>
				<van-cell icon="envelop-o" title="400012345678" value="复制邮箱" is-link/>
				<van-cell center icon="location">
					<template #title><div class="font-12" style="line-height:18px;">联系地址：No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</div></template>
				</van-cell>
			</van-cell-group>
		</van-action-sheet>
	</main>
</template>
<style lang="scss" scoped>
main{
	--van-primary-color:v-bind(themeColor);
	:deep(.van-action-sheet__description){font-size:16px;padding:16px;}
	.shop-logo{
		width:70px;height:70px; border-radius:50%;border:1px solid var(--border-color);
		img{width:68px;height:68px;display:block;}
	}
	.primary-icon{
		:deep(.van-cell__left-icon),.iconfont{color:var(--van-primary-color);padding-right:4px;}
		:deep(.van-cell__title){flex:3}
	}
	.shop-base-wrap{
		width:calc(100vw - 132px); min-height:70px; padding-left:10px;flex:1; display:flex; flex-direction:column; justify-content: center;
		.full-name{ font-size:14px; color:var(--font-first-color);}
		.follower{ color:var(--font-third-color);font-size:12px; margin-top: 5px;}
		.shop-medal{
			display:flex; align-items: center; margin-top:5px;
			.medal-item{
				color:var(--van-primary-color);font-size:13px; margin-right:8px;
				.iconfont{margin-right:2px;}
				span{color:var(--font-disable-color)}
			}
		}
	}
	.linker{
		display:flex; align-items: center; justify-content: flex-end;
		.font-12{margin-right:6px;}
	}
	.base-info{
		:deep(.van-cell__title){ flex:0.4; }
		:deep(.van-cell__value){ flex:0.6; }
	}
	.trade-main{
		font-size: 14px; align-items:center;
		.title{flex:1}
		.value{flex:4;padding-left:20px; line-height:1.2; color:var(--font-third-color); text-align: right;}
	}
	.refund{
		font-size:12px; border:1px solid var(--van-unicom-color);line-height: 14px;
		padding:0 6px 0 0; border-radius:2px; color:var(--van-unicom-color); overflow: hidden; cursor: default;
		b{
			display:inline-block;width:16px;height:16px;line-height: 16px;
			text-align: center;color:var(--white-color); background-color: var(--van-unicom-color);
		}
	}
}
.overview{
	padding:10px var(--van-padding-md); color:var(--font-second-color);font-size:14px; text-indent:28px;display:block!important;
	&:after {
		position: absolute;
		box-sizing: border-box;
		content: " ";
		display:block;
		right: var(--van-padding-md);
		bottom: 0;
		left: var(--van-padding-md);
		border-bottom: 0.02667rem solid var(--van-cell-border-color);
		transform: scaleY(.5);
	}
}
</style>
<script lang="ts" setup>
import {copyText} from '@/utils/validate'
import { showImagePreview } from 'vant';
const props=defineProps({
	themeColor:{
		type:String,
		default:import.meta.env.VITE_THEME_COLOR
	},
	shopId:{
		type:String,
		required:true,
	},
})
//data
const showLinker=ref(false)
const preview =()=>{
	showImagePreview([
		'https://cbu01.alicdn.com/img/ibank/O1CN01sFDX821Bs2fJhjNgP_!!0-0-cib.jpg',
	]);
}

const overview=ref('西安乐淘玩具有限公司 经销批发的玩具、玩具畅销消费者市场，在消费者当中享有较高的地位，公司与多家零售 商和代理商建立了长期稳定的合作关系。西安乐淘玩具有限公司经销的玩具、玩具品种齐全、价格合理。西安乐淘 玩具有限公司实力雄厚，重信用、守合同、保证产品质量，以多品种经营特色和薄利多销的原则，……')
</script>